<template>
  <div class="noteWord animate__animated">
    <ul
    v-infinite-scroll="listLoadNext"
    :infinite-scroll-delay="500"
    class="infinite-list" style="overflow: auto">
      <li :key="index" v-for="(item, index) in loadListData" class="infinite-list-item">
        <div class="load-list-item">
          <h2>{{item.title}}</h2>
          <div :style="`background-image: url(${item.imgUrl});`" v-if="item.imgUrl" class="discription-img">
          </div>
          <p>
            {{item.description}}
          </p>
          <span>时间:{{item.date}}</span>
          <el-button type="text">进入文章</el-button>
        </div>
      </li>
    </ul>
  </div>
</template>
<style lang="scss" scoped>
.noteWord {
  .infinite-list{
    // width: 420px;
    margin: auto;
    height: calc(100vh - 170px);
    overflow: visible;
    &::-webkit-scrollbar {
      width: 4px;
    }
    &::-webkit-scrollbar-thumb {
      border-radius: 10px;
      // -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
      background: var(--layout-main-scroll-color);
    }
  }
  .load-list-item {
    // display: inline-block;
    // margin: auto;
    margin-bottom: 14px;
    // text-align: center;
    &:last-child {
      margin-bottom: 0;
    }
    span {
      // color: #ccc;
    }
    :deep(.el-button) {
      margin-left: 20px;
    }
    .discription-img {
      background-repeat: no-repeat;
      background-size: cover;
      width: 340px;
      height: 240px;
      // margin: auto;
    }
  }
}
</style>
<script setup lang="ts">
import { reactive, ref } from 'vue'
// 控制加载列表项的分页参数
// const pages = shallowReactive({
//   current: 1,
//   size: 10
// })
// 假数据,懒加载列表
const loadListData = reactive([
  {
    title: '关于啥啥啥',
    description: '如何XXXXXXXXXXXXXXXXXX',
    imgUrl: 'https://blog.moozae.cn/img/avatar_hu66eedb7ce01e29c816a3b1615b707e06_385400_300x0_resize_box_3.png',
    date: '2019-3-28'
  },
  {
    title: '关于啥啥啥',
    description: '如何XXXXXXXXXXXXXXXXXX',
    date: '2019-3-28'
  },
  {
    title: '关于啥啥啥',
    description: '如何XXXXXXXXXXXXXXXXXX',
    date: '2019-3-28'
  },
  {
    title: '关于啥啥啥',
    description: '如何XXXXXXXXXXXXXXXXXX',
    date: '2019-3-28'
  },
  {
    title: '关于啥啥啥',
    description: '如何XXXXXXXXXXXXXXXXXX',
    date: '2019-3-28'
  },
  {
    title: '关于啥啥啥',
    description: '如何XXXXXXXXXXXXXXXXXX',
    date: '2019-3-28'
  },
  {
    title: '关于啥啥啥',
    description: '如何XXXXXXXXXXXXXXXXXX',
    date: '2019-3-28'
  },
  {
    title: '关于啥啥啥',
    description: '如何XXXXXXXXXXXXXXXXXX',
    date: '2019-3-28'
  },
  {
    title: '关于啥啥啥',
    description: '如何XXXXXXXXXXXXXXXXXX',
    date: '2019-3-28'
  },
  {
    title: '关于啥啥啥',
    description: '如何XXXXXXXXXXXXXXXXXX',
    date: '2019-3-28'
  }
])
// 列表滑动底部加载
const listLoadNext = (value:string) => {
  // console.log(value)
  loadListData.push(
    {
      title: '关于啥啥啥',
      description: '如何XXXXXXXXXXXXXXXXXX',
      date: '2019-3-28'
    }
  )
  loadListData.push(
    {
      title: '关于啥啥啥',
      description: '如何XXXXXXXXXXXXXXXXXX',
      date: '2019-3-28'
    }
  )
  loadListData.push(
    {
      title: '关于啥啥啥',
      description: '如何XXXXXXXXXXXXXXXXXX',
      date: '2019-3-28'
    }
  )
  loadListData.push(
    {
      title: '关于啥啥啥',
      description: '如何XXXXXXXXXXXXXXXXXX',
      date: '2019-3-28'
    }
  )
  loadListData.push(
    {
      title: '关于啥啥啥',
      imgUrl: 'https://blog.moozae.cn/img/avatar_hu66eedb7ce01e29c816a3b1615b707e06_385400_300x0_resize_box_3.png',
      description: '如何XXXXXXXXXXXXXXXXXX',
      date: '2019-3-28'
    }
  )
}
</script>
